import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:freedom/page/mahjong/common/mahjong_context.dart';
import 'package:freedom/page/mahjong/mahjong_game.dart';

class PlayBackDialog extends StatefulWidget {
  final MahjongIndexGame game;
  const PlayBackDialog({super.key, required this.game});

  @override
  State<PlayBackDialog> createState() => _PlayBackDialogState();
}

class _PlayBackDialogState extends State<PlayBackDialog> {
  int menuIndex = 0;

  MahjongIndexGame get game => widget.game;

  double count = 0.0;

  double currentProcess = 0;

  @override
  void initState() {
    count = (game.roomRecord!.length - 1).toDouble();
    game.scheduleController?.stream.listen((event) {
      currentProcess = event;
      setState(() {});
    });
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Material(
        color: Colors.transparent,
        child: Container(
          width: double.infinity,
          height: double.infinity,
          decoration: const BoxDecoration(color: Colors.transparent),
          child: SafeArea(
              child: Stack(
            children: [
              Align(
                alignment: const Alignment(1, -0.7),
                child: Container(
                  width: 70.h,
                  height: 60.h,
                  margin: EdgeInsets.only(right: 100.w),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5.r),
                    gradient: const LinearGradient(
                      begin: Alignment.centerLeft,
                      end: Alignment.centerRight,
                      colors: [
                        Color.fromARGB(45, 0, 0, 0),
                        Color.fromARGB(106, 0, 0, 0),
                        Color.fromARGB(45, 0, 0, 0),
                      ],
                    ),
                  ),
                  child: InkWell(
                    onTap: () {
                      MahjongContext().gameOverAndToIndex();
                    },
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(
                          Icons.exit_to_app,
                          color: Colors.white,
                          size: 30.h,
                        ),
                        Text(
                          "${currentProcess.toInt()}/${count.toInt()}",
                          style: TextStyle(color: Colors.white, fontSize: 15.h),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
              Align(
                alignment: const Alignment(0, 0.5),
                child: Container(
                  height: 40.h,
                  width: double.infinity,
                  margin: EdgeInsets.only(left: 100.w, right: 100.w),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5.r),
                    gradient: const LinearGradient(
                      begin: Alignment.centerLeft,
                      end: Alignment.centerRight,
                      colors: [
                        Color.fromARGB(45, 0, 0, 0),
                        Color.fromARGB(106, 0, 0, 0),
                        Color.fromARGB(45, 0, 0, 0),
                      ],
                    ),
                  ),
                  child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        Center(
                          child: InkWell(
                            onTap: () {
                              if (!game.playBackSuspend) {
                                game.stopPlayTimer();
                              } else {
                                game.initPlayTimer();
                              }
                              setState(() {});
                            },
                            child: Container(
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(1.h),
                                  border: Border.all(color: Colors.white)),
                              padding: EdgeInsets.all(1.h),
                              child: Icon(
                                game.playBackSuspend
                                    ? Icons.play_arrow
                                    : Icons.stop,
                                size: 20.h,
                                color: game.playBackSuspend
                                    ? Colors.white
                                    : Colors.red,
                              ),
                            ),
                          ),
                        ),
                        SizedBox(
                            width: 600.w,
                            height: 10.h,
                            child: Slider(
                                thumbColor: Colors.white,
                                activeColor: Colors.blue,
                                value: currentProcess,
                                max: count,
                                onChangeEnd: (value) {
                                  game.playIndex(value.toInt());
                                },
                                onChanged: (data) {
                                  game.playBackSuspend = true;
                                  currentProcess = data;
                                  setState(() {});
                                }))
                      ]),
                ),
              )
            ],
          )),
        ));
  }
}
